<template>
  <view class="phone-wrapper" :style="{paddingTop: `${getSystemInfo.navBarHeight || 70}px`}">
    <navBar title="设置密码" />
    <view class="content-wrapper">
      <u--form labelPosition="left" label-width="70px" ref="formRef" :model="formData">
        <!-- 输入密码 -->
        <u-form-item label="输入密码" prop="newPassword">
          <u-input placeholder="请设置8位英文+数字" border="bottom" :password="lockNewPassword"
            v-model.trim="formData.newPassword">
            <template slot="suffix">
              <u-icon name="eye-off" :name="lockNewPassword ? 'eye-off' : 'eye'" color="#666" size="42"
                @click="lockNewPassword = !lockNewPassword">
              </u-icon>
            </template>
          </u-input>
        </u-form-item>
        <!-- 确认密码 -->
        <u-form-item label="确认密码" prop="confirmPassword">
          <u-input placeholder="请设置8位英文+数字" border="bottom" :password="lockConfirmPassword"
            v-model.trim="formData.confirmPassword">
            <template slot="suffix">
              <u-icon name="eye-off" :name="lockConfirmPassword ? 'eye-off' : 'eye'" color="#666" size="42"
                @click="lockConfirmPassword = !lockConfirmPassword">
              </u-icon>
            </template>
          </u-input>
        </u-form-item>
      </u--form>
    </view>
    <view class="action-bottom">
      <u-button color="#CF1A1B" @click="setPassword" :disabled="loading || isDiabled" :loading="loading">确认提交</u-button>
    </view <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapState
  } from 'vuex'
  import navBar from '@/components/navBar.vue'
  export default {
    components: {
      navBar
    },
    data() {
      return {
        lockNewPassword: true,
        lockConfirmPassword: true,
        formData: {
          newPassword: '',
          confirmPassword: '',
        },
        rules: {
          newPassword: [{
              required: true,
              message: '密码不能为空',
              trigger: ['blur', 'change'],
            },
            {
              pattern: /^(?=.*[a-zA-Z]+)(?=.*[0-9]+)[a-zA-Z0-9]{8,}$/g,
              transform(value) {
                return String(value);
              },
              message: '请输入8位以上英文+数字的密码'
            },
          ],
          confirmPassword: [{
              required: true,
              message: '密码不能为空',
              trigger: ['blur', 'change'],
            },
            {
              validator: (rule, value, callback) => {
                if (value != this.formData.newPassword) {
                  callback(new Error('密码不一致，请修改后再次提交'))
                } else {
                  callback()
                }
              },
              trigger: ['change', 'blur'],
            }
          ]
        },
        accessKey: '',
        isDiabled: false
      }
    },
    computed: {
      ...mapGetters('global', ['getSystemInfo'])
    },
    watch: {
      formData: {
        immediate: true,
        deep: true,
        handler(val) {
          if (val.newPassword && val.confirmPassword) {
            this.isDiabled = false
          } else {
            this.isDiabled = true
          }
        }
      }
    },
    methods: {
      async setPassword() {
        try {
          this.loading = true
          const res = await this.$request({
            url: '/user-center/app/users/resetPwd',
            data: {
              accessKey: this.accessKey,
              newPassword: this.formData.confirmPassword
            }
          })
          if (res && res.respCode === 200) {
            uni.showToast({
              title: '重置成功',
              complete: function(res) {
                setTimeout(() => {
                  uni.reLaunch({
                    url: `/minePack/user/personalInformation/index`
                  })
                }, 500)
              }
            })
          }
        } catch (err) {
          this.isDiabled = true
          this.$refs.uToast.show({
            message: err.respMsg || '操作失败',
            duration: '3000',
            position: 'top'
          })
        } finally {
          this.loading = false
        }
      },
    },
    onReady() {
      this.$refs.formRef.setRules(this.rules)
    },
    onLoad(query) {
      const {
        data
      } = query
      if (data) {
        this.accessKey = data
      }
    }
  }
</script>

<style lang="scss" scoped>
  .phone-wrapper {
    background-color: #FFFFFF;

    .content-wrapper {
      padding: 32rpx;
    }

    .action-bottom {
      height: 70px;
      width: 100%;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #FFFFFF;

      /deep/ .u-button {
        width: 90% !important;
      }
    }
  }
</style>